<script setup lang="ts">
import { useRouter } from 'vue-router'
import type { FieldRule } from 'vant'
import { showNotify } from 'vant'
import { useUserStore } from '@/stores'
import vw from '@/utils/inline-px-to-vw'
import request from '@/utils/request'

const { t } = useI18n()
const router = useRouter()
const userStore = useUserStore()
const loading = ref(false)

const postData = reactive({
  uName: '', // 注册用户名
  uWechat: '', // 注册微信信息
  uEmail: '', // 注册邮箱
  uCellphone: '', // 注册手机号
  uPwdword: '', // 注册密码
  uRPwdword: '', // 重新输入密码
  uNetavator_url: '', // 网络头像链接
  uUploadavator_url: '', // 自己上传的头像的链接 （minio存入的桶地址）
})

const validatorPassword = (val: string) => val === postData.uPwdword
// 验证手机号码是否合法
function isValidTelephone(telephone: string) {
  const reg = /^1[3-9]\d{9}$/
  return reg.test(telephone)
}

const rules = reactive({
  uName: [
    { required: true, message: '请输入用户名' },
  ],
  uWechat: [
    { required: false, message: '请输入微信号' },
  ],
  uEmail: [
    { required: false, message: '请输入邮箱' },
  ],
  uCellphone: [
    { required: true, message: '请输入电话号码' },
    {
      validator: (value: string) => isValidTelephone(value),
      message: '电话号码有误',
    },
  ] as FieldRule[],
  uPwdword: [
    { required: true, message: '请输入密码' },
  ],
  uRPwdword: [
    { required: true, message: '请再次输入密码' },
    { required: true, validator: validatorPassword, message: '密码不一致' },
  ] as FieldRule[],
})

async function register() {
  try {
    loading.value = true

    postData.uNetavator_url = 'http://118.178.124.108:9000/avatars/lixule.jpg'
    postData.uUploadavator_url = 'http://118.178.124.108:9000/avatars/lixule.jpg'

    const res = await request.post('/dragon/register', postData)

    if (res.code == 200 && res.msg === '注册成功') {
      showNotify({ type: 'success', message: '注册成功' })
      router.replace({ name: 'login' })
    }
    if (res.code == 200 && res.msg === '注册失败') {
      showNotify({ type: 'warning', message: '注册失败' })
    }

    // const res = await userStore.register()

    // if (res.code === 0) {
    //   showNotify({ type: 'success', message: t('register.registerSuccess') })
    //   router.push({ name: 'login' })
    // }
  }
  finally {
    loading.value = false
  }
}

const isGettingCode = ref(false)

const buttonText = computed(() => {
  return isGettingCode.value ? t('register.gettingCode') : t('register.getCode')
})
</script>

<template>
  <div class="m-x-a text-center w-7xl">
    <van-form :model="postData" :rules="rules" validate-trigger="onSubmit" @submit="register">
      <div class="rounded-3xl overflow-hidden" style="margin-top: 20px">
        <van-field
          v-model.trim="postData.uName"
          label="用户名"
          required
          clearable
          :rules="rules.uName"
          name="uName"
          placeholder="请输入用户名"
        />
      </div>

      <!-- <div class="mt-16 rounded-3xl overflow-hidden">
        <van-field
          v-model.trim="postData.code"
          :rules="rules.code"
          name="code"
          :placeholder="$t('register.code')"
        >
          <template #button>
            <van-button size="small" type="primary" plain @click="getCode">
              {{ buttonText }}
            </van-button>
          </template>
        </van-field>
      </div> -->

      <div class="rounded-3xl overflow-hidden" style="margin-top: 20px">
        <van-field
          v-model.trim="postData.uWechat"
          label="微信"
          clearable
          :rules="rules.uWechat"
          name="uWechat"
          placeholder="微信号/手机号"
        />
      </div>

      <div class="rounded-3xl overflow-hidden" style="margin-top: 20px">
        <van-field
          v-model.trim="postData.uEmail"
          label="邮箱"
          clearable
          :rules="rules.uEmail"
          name="uEmail"
          placeholder="QQ/139/163..."
        />
      </div>

      <div class="rounded-3xl overflow-hidden" style="margin-top: 20px">
        <van-field
          v-model.trim="postData.uCellphone"
          label="手机号"
          clearable
          required
          :rules="rules.uCellphone"
          name="uCellphone"
          placeholder="请输入手机号"
        />
      </div>

      <div class="mt-16 rounded-3xl overflow-hidden" style="margin-top: 20px">
        <van-field
          v-model.trim="postData.uPwdword"
          label="密码"
          required
          clearable
          type="password"
          :rules="rules.uPwdword"
          name="uPwdword"
          placeholder="请输入密码"
        />
      </div>

      <div class="mt-16 rounded-3xl overflow-hidden" style="margin-top: 20px">
        <van-field
          v-model.trim="postData.uRPwdword"
          label="确认密码"
          required
          clearable
          type="password"
          :rules="rules.uRPwdword"
          name="uRPwdword"
          placeholder="请重新输入密码"
        />
      </div>

      <div class="mt-16">
        <van-button
          :loading="loading"
          :disabled="loading"
          type="primary"
          native-type="submit"
          round block
        >
          注册
        </van-button>
      </div>
    </van-form>

    <!-- <GhostButton to="login" block :style="{ 'margin-top': vw(5) }">
      返回登录
    </GhostButton> -->

    <van-row justify="space-between">
      <van-col span="6">
        <GhostButton block to="login" :style="{ 'margin-top': vw(2) }">
          返回登录
        </GhostButton>
      </van-col>
      <van-col span="6">
        <GhostButton block to="/">
          返回首页
        </GhostButton>
      </van-col>
    </van-row>
  </div>
</template>

<route lang="json5">
{
  name: 'register',
  meta: {
    i18n: 'menus.register'
  },
}
</route>
